<template>
  <div>
    <el-card style="margin: 20px 0px">
      <!-- 选择买家账号 -->
      <el-select v-model="buyerId" placeholder="选择买家账号">
        <div v-for="buyer in buyerList" :key="buyer.buyerId">
          <el-option :label="buyer.buyerId" :value="buyer.buyerId"></el-option>
        </div>
      </el-select>
      <!-- 显示买家名 -->
      <el-input
        :value="getBuyerName"
        placeholder="显示买家"
        style="width: 250px; margin-left: 20px"
        :disabled="true"
      ></el-input>
      <el-button
        type="success"
        icon="el-icon-tickets"
        style="margin-left: 20px"
        @click="buyerId = ''"
        >查看全部</el-button
      >
    </el-card>

    <!-- 显示订单 -->
    <el-card>
      <el-table style="width: 100%; margin-top: 50px" border :data="list">
        <el-table-column
          type="index"
          label="序号"
          width="80px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="buyerId"
          label="用户账号"
          width="200px"
        ></el-table-column>
        <el-table-column
          prop="wares.waresName"
          label="商品名"
          width="200px"
        ></el-table-column>
        <el-table-column
          prop="prop"
          label="商品图片"
          width="200px"
          align="center"
        >
          <template slot-scope="{ row }">
            <div class="block">
              <el-carousel
                height="80px"
                :autoplay="false"
                indicator-position="none"
              >
                <el-carousel-item
                  v-for="item in row.wares.pictureList"
                  :key="item"
                >
                  <img :src="item" alt="123" width="80px" height="80px" />
                </el-carousel-item>
              </el-carousel>
            </div> </template
        ></el-table-column>
        <el-table-column
          prop="waresNumber"
          label="商品数"
          width="100px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="orderTime"
          label="开始时间"
          width="200px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="orderState"
          label="订单状态"
          width="100px"
          align="center"
        ></el-table-column>
        <el-table-column prop="prop" label="操作" width="width">
          <template slot-scope="{ row }">
            <el-button
              type="warning"
              icon="el-icon-edit"
              @click="updateOrderState(row.orderId, row)"
              v-if="row.orderState != '交易完成'"
              >推进状态</el-button
            >
            <el-button
              type="warning"
              icon="el-icon-edit"
              @click="updateOrderState(row.orderId, row)"
              v-else
              >提交订单</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="deleteOrder(row.orderId)"
              >取消订单</el-button
            >
            <div style="display: none">{{ row }}</div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        style="margin-top: 20px; text-align: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        layout="sizes, prev, pager, next, total"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 选择配送方式-->
    <el-dialog title="选择配送方式" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="配送方式" :label-width="formLabelWidth">
          <el-select v-model="form.distribution" placeholder="选择配送方式">
            <div v-for="item in distributionList" :key="item">
              <el-option :label="item" :value="item"></el-option>
            </div>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateOrderStateAndDistribution"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
export default {
  name: "OrderForm",

  data() {
    return {
      buyerId: this.$route.params.buyerId || "",
      page: 1,
      limit: 5,
      total: 0,
      list: [],
      buyerList: [],
      form: {
        newOrderId: "",
        distribution: "顺丰快递",
      },
      distributionList: ["顺丰快递", "中通快递", "韵达快递", "圆通快递"],
      dialogFormVisible: false,
      formLabelWidth: "120px",
    };
  },

  mounted() {
    this.getOrderList();
    this.getBuyerList();
  },

  methods: {
    handleSizeChange(limit) {
      this.limit = limit;
      this.getOrderList();
    },
    handleCurrentChange(pager) {
      this.page = pager;
      this.getOrderList();
    },
    //正常显示订单状态
    OrderState(orderState) {
      switch (orderState) {
        case 1:
          return "客户下单";
        case 2:
          return "待支付";
        case 3:
          return "已支付";
        case 4:
          return "商家确认";
        case 5:
          return "备货完成";
        case 6:
          return "开始发货";
        default:
          return "交易完成";
      }
    },
    //获取所有记录
    async getOrderList() {
      const { page, limit, buyerId } = this;
      let result = await this.$API.orderForm.reqSelectOrderList({
        page,
        limit,
        buyerId,
      });
      if (result.code == 200) {
        this.total = result.data.total;
        this.list = result.data.ordersList;
        for (let i of this.list) {
          i.orderState = this.OrderState(i.orderState);
        }
      } else {
        return Promise.reject(new Error("false"));
      }
    },
    //获取所有买家
    async getBuyerList() {
      let result = await this.$API.buyer.reqSellerBuyerList();
      if (result.code == 200) {
        this.buyerList = result.data;
      } else {
        return Promise.reject(new Error("false"));
      }
    },
    //推进状态
    async updateOrderState(orderId, row) {
      if (row.orderState == "开始发货") {
        this.form.orderId=orderId;
        this.dialogFormVisible=true;
      } else {
        let result = await this.$API.orderForm.reqUpdateOrder(orderId);
        if (result.code == 200) {
          this.$message({
            message: result.data,
            type: "success",
          });
          this.getOrderList();
        } else {
          return Promise.reject(new Error("false"));
        }
      }
    },
    //推进状态并提交配送方式
    async updateOrderStateAndDistribution() {
      let orderId = this.form.orderId;
      let distribution = this.form.distribution;
      let result = await this.$API.orderForm.reqUpdateOrderAndDistribution(
        orderId,
        distribution
      );
      if (result.code == 200) {
        this.$message({
          message: result.data,
          type: "success",
        });
        this.getOrderList();
      } else {
        return Promise.reject(new Error("false"));
      }
      this.dialogFormVisible=false;
    },
    //取消订单
    async deleteOrder(orderId) {
      let result = await this.$API.orderForm.reqDeleteOrder(orderId);
      if (result.code == 200) {
        this.$message({
          message: result.data,
          type: "success",
        });
        this.getOrderList();
      } else {
        return Promise.reject(new Error("false"));
      }
    },
  },
  computed: {
    getBuyerName() {
      for (let i of this.buyerList) {
        if (i.buyerId === this.buyerId) {
          return i.buyerName;
        }
      }
      return "";
    },
  },
  watch: {
    buyerId() {
      this.getOrderList();
    },
  },
};
</script>
  
  <style lang="scss" scoped>
</style>